<template>
<div class='alph'>
    <ul>
        <li  @click="select" v-for="(item,key) in az " :key="key">{{ item }}</li>
    </ul>
</div>
</template>


<script>
    export default{
        props:['az'],
        methods: {
            select(e){
                this.$emit('son',e.target.innerText)         
            }
          
        }
    }
</script>


<style lang="scss" scoped>
@import '../../css/sass/common.scss';
.alph{
    height: 100%;
    position: fixed;
    right: 0;
    top: 1rem;
    z-index: 999;
    ul{
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         li{
             padding-top: 0.1rem;
             width: 0.2rem;
             line-height: 0.32rem;
             color: #16BFC7;
         }
    }
}
</style>

